import react, { Component } from "react";
import ReactLifeCycle from "../image/ReactLifeCycle.png";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Update from "./Update";
import Install from "./Install";
import "./style.css";
const imgStyle = {
  width: 70 + "%",
  height: 70 + "50%",
};
class LifeCycle extends Component {
  render() {
    return (
      <div className="ContentClass">
        <h1>{"React Life Cycle"}</h1>
        <img style={imgStyle} src={ReactLifeCycle} />
        <br />
        <a href="https://www.jianshu.com/p/b331d0e4b398#11constructor">
          {"资料1"}
        </a>
        <p>{"React的生命周期从广义上分为三个阶段：挂载、渲染、卸载 "}</p>
        <p>{"因此可以把React的生命周期分为两类：挂载卸载过程和更新过程"}</p>
        {/* react 生命周期主要分为两大类 */}
        <div>
          <Install />
          <Update />
          {/* <Router>
            <ul>
              <li>
                <Link to="./Install">Install</Link>
              </li>
              <li>
                <Link to="./Update">Update</Link>
              </li>
            </ul>

            <Switch>
                          <Route path="./Install" Component={Install} />
              <Route path="./Update" Component={Update} />
            </Switch>
          </Router> */}
          {/* <RouterLife /> */}
        </div>
      </div>
    );
  }
}

class RouterLife extends Component {
  render() {
    return (
      <Router>
        <ul>
          <li>
            <Link to="./Install">Install</Link>
          </li>
          <li>
            <Link to="./Update">Update</Link>
          </li>
        </ul>

        <Switch>
          <Route path="./Install" Component={Install} />
          <Route path="./Update" Component={Update} />
        </Switch>
      </Router>
    );
  }
}
export default LifeCycle;
